<template>
  <el-dialog v-model="dialogVisible" title="添加成员" width="1100">
    <div class="addMemberDialogContainer">
      <div class="left">
        <el-input
          v-model="input2"
          class="responsive-input"
          placeholder="请输入成员名称搜索"
          :prefix-icon="Search"
          size="small"
        />
        <el-tree
          :data="dataSource"
          style="margin-top: 6px"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleDeptNodeClick"
        >
          <template #default="{ node, data }">
            <span v-if="data.level === 0" class="tree-item">
              <img src="@/assets/pm/company.svg" />
              <span>{{ data.name }}</span>
            </span>
            <span
              v-if="data.level > 0 && data.level < maxDeep"
              class="tree-item"
            >
              <img src="@/assets/pm/group.svg" />
              <span>{{ data.name }}</span>
            </span>
            <span v-if="data.level === maxDeep" class="tree-item">
              <img src="@/assets/pm/department.svg" />
              <span>{{ data.name }}</span>
            </span>
          </template>
        </el-tree>
      </div>
      <div class="right">
        <div>
          <span style="color: #141414; font-weight: 500; font-size: 16px"
            >产研一部</span
          >
          <span style="color: #999999">（8人）</span>
        </div>
        <!--    table    -->
        <div class="userProjectRoleSelectTable">
          <div class="tableTh">
            <span class="check"><el-checkbox></el-checkbox></span>
            <span class="thTitle">成员名称</span>
            <span class="thTitle">角色</span>
          </div>
          <div class="tableBody">
            <div class="tableTd"></div>
          </div>
        </div>
        <!--   表格   -->
      </div>
    </div>
    <template #footer>
      <div class="footer">
        <div class="selectedMember">
          <div v-for="i in 4" class="member">
            <el-avatar
              shape="circle"
              size="small"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
            <div>张三丰</div>
          </div>
          <el-popover
            placement="top-start"
            :show-arrow="false"
            popper-class="member-popover"
            popper-style="min-width:100px"
            width="100px"
          >
            <div v-for="i in 4" class="member">
              <el-avatar
                shape="circle"
                size="small"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <div class="name">张三丰</div>
            </div>
            <template #reference>
              <span class="circle">+3</span>
            </template>
          </el-popover>
        </div>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave"> 保存 </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
  import { Search } from "@element-plus/icons-vue";
  import { computed, nextTick, onMounted, provide, ref, watch } from "vue";
  import { getDept } from "@/api/uap";
  import { getUserListAll } from "@/api/user.ts";
  const dialogVisible = defineModel();

  interface Props {
    roleList: any[];
  }
  const props = defineProps<Props>();
  interface Tree {
    id: number;
    label: string;
    type: "company" | "group" | "department";
    children?: Tree[];
  }

  const input2 = ref("");

  const tableData = ref<any[]>([]);

  const dataSource = ref<Tree[]>([]);

  const getDeptTree = async () => {
    const res = await getDept();
    console.log(res, "getDeptTree");

    dfsTree(res);
    dataSource.value = res;
  };

  let maxDeep = 0;
  const dfsTree = (arr: any[]) => {
    const dfs = (node: any, level: number) => {
      maxDeep = Math.max(maxDeep, level);
      node.level = level;
      node.children &&
        node.children.forEach((item) => {
          dfs(item, level + 1);
        });
    };
    arr.forEach((item) => {
      if (item.children && item.children.length > 0) {
        dfs(item, 0);
      }
    });
  };

  const handleDeptNodeClick = async (data: any, node: any) => {
    const res = await getUserListAll(
      {
        pageNo: 1,
        pageSize: 999,
      },
      data.id,
    );
    console.log(res, "res");
    tableData.value = res.result.map((item) => {
      item.roleList = [];
      return item;
    });
  };
  getDeptTree();
  const handleSave = () => {
    console.log(tableData.value);
  };
  onMounted(() => {
    nextTick(() => {});
  });
</script>
<style scoped lang="scss">
  .member-popover .member,
  .member {
    display: flex;
    align-items: center;
    gap: 3px;
    .name {
      display: flex;
      align-items: flex-end;
      height: 24px;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .selectedMember {
      font-size: 14px;
      display: flex;
      gap: 8px;
    }
  }
  .circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #5e5e5e;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .addMemberDialogContainer {
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    display: flex;
    height: 547px;
    .left {
      border-right: 1px solid #e6e6e6;
      padding: 8px;
      width: 300px;
    }
    .right {
      flex: 1;
      padding: 16px;
    }
    .userProjectRoleSelectTable {
      .tableTh {
        display: flex;
        align-items: center;
        padding: 0 5px;
        border-bottom: 1px solid #e6e6e6;
        .check {
          width: 22px;
          position: relative;
          top: 1px;
        }
        .thTitle {
          flex: 5;
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
  .tree-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .table-container {
    margin-top: 12px;
    height: 350px;
    width: 100% !important;
    overflow: auto;
  }
</style>
